<div>
    <div id="tb<?php echo $uniqid;?>" style="padding:5px" class="datagrid-toolbar">
        <table cellspacing="0" cellpadding="0">
            <tbody>
            <tr>
                <td><a href="javascript:void(0);" onclick="dianpuapplygetorderReload();"
                       class="l-btn l-btn-small l-btn-plain"><span
                        class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                        class="l-btn-text">重载</span></span></a></td>
                <td><span style="line-height:30px;">日期</span>
                    <input id="dianpuapplygetorderStartOn" style="width:110px" type="text"
                           class="easyui-datebox"> </input>至
                    <input id="dianpuapplygetorderEndOn" style="width:110px" type="text"
                           class="easyui-datebox"> </input>
                </td>
                <td><select id="dianpuapplygetorderKeywordsType" class="forminput inputstyle textbox-text validatebox-text"
                            style="width:80px">
                    <option value="order_id">订单ID</option>
                    <option value="order_sn">订单编号</option>
                    <option value="consignee">收货人</option>
                    <option value="consignee_phone">收货人手机号</option>
                </select></td>
                <td>&nbsp&nbsp;<input id="dianpuapplygetorderKeywords" style="width:120px" type="text"
                                      class="easyui-input textbox"></td>
                <td><a href="javascript:void(0);" onclick="dianpuapplygetorderSearch();"
                       class="l-btn l-btn-small l-btn-plain"><span
                        class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span class="l-btn-text">查询</span></span></a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="con" style="-moz-user-select:none;">
        <table id="dianpuapplygetorderTable"></table>
    </div>
    <div id="dianpuapplygetorderDlg" class="easyui-dialog" style="width:720px; height:520px;" title="信息框" closed="true"></div>
</div>
<script>
    var dianpuapplygetorderVm = new Vue({
        el: '#tb<?php echo $uniqid;?>',
        data: {
            params: {
            }
        },
        methods: {
        }
    });
    var dianpuapplygetorderReload = function () {
        $("#dianpuapplygetorderTable").datagrid('reload');
    };
    var dianpuapplygetorderSearch = function () {
        var height = 546 - $(".top").height() - 46;
        var width = 960 - 8;
        $("#dianpuapplygetorderTable").datagrid({
            width: width,
            height: height,//高度
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: true,//如果为true，则显示一个行号列。
            pagination: true,//是否显示分页
            pageSize: 10,
            pageList: [10, 15, 20, 25],
            method: 'post',
            sortName: 'id',
            sortOrder: 'desc',
            idField: 'id',
            treeField: 'title',
            url: '/admin/dianpuapply/getorder',
            queryParams: {
                id: '<?php echo $id;?>',
                keywordsType: $('#dianpuapplygetorderKeywordsType').val(),
                keywords: $('#dianpuapplygetorderKeywords').val(),
                start_on: $('#tb<?php echo $uniqid;?> #dianpuapplygetorderStartOn').val(),
                end_on: $('#tb<?php echo $uniqid;?> #dianpuapplygetorderEndOn').val(),
            },
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: true,
            checkOnSelect: true,
            toolbar: '#tb<?php echo $uniqid;?>',
            columns: [[
                {field: 'id', title: '订单ID', width: fixWidth(5)},
                {field: 'order_sn', title: '订单及商品', width: fixWidth(25),
                    formatter: function (value, rowData, rowIndex) {
                        let con = `<li>订单编号：${value}</li>`;
                        if(rowData.item.length){
                            let num_index = 1;
                            for (let item of rowData.item){
                                con += `<li>商品${num_index}:${item.goods_title}</li>`;
                                num_index++;
                            }
                        }

                        con += '</div>';
                        return con;
                    }},
                {field: 'status_name', title: '订单状态', width: fixWidth(10)},
                {field: 'total_amount', title: '订单总金额', width: fixWidth(10), formatter(value, rowData) {
                        let con = `<li>订单总金额: ${value}</li>`;
                        con += `<li>折扣总金额: ${rowData.discount_fee}</li>`;
                        if(rowData.hongbao_fee > 0){
                            con += `<li>兑换券支付: ${rowData.hongbao_fee}</li>`;
                        }
                        con += `<li>实际支付金额: ${rowData.total_fee}</li>`;
                        return con;
                    }},
                {
                    field: 'paytime', title: '支付方式及时间', width: fixWidth(15), formatter(value, rowData) {
                        let time = `<li>支付方式: ${rowData.pay_type_text}</li>`;
                        time = `<li>支付时间: ${moment(value * 1000).format("Y-MM-DD HH:mm:ss")}</li>`;
                        time += `<li>下单时间: ${rowData.created_at}</li>`;
                        return time;
                    }
                }
            ]]
        });
    };
    dianpuapplygetorderSearch();

    $(function () {
        $('#dianpuapplyFeeEditOrdersubmit').click(function (data) {
            let selectedOrder = $('#dianpuapplygetorderTable').datagrid('getChecked');
            if(selectedOrder.length){
                if('undefined' !== typeof dianpuapplyFeeEditVm){
                    dianpuapplyFeeEditVm.params.agent_fee_payed_id = selectedOrder[0].id;
                    dianpuapplyFeeEditVm.params.agent_fee_pay_status = 1;
                }
                $("#dianpuapplyfeeeditdlg").dialog('close');
            }else{
                $.messager.alert('提示', '请先选择订单！', 'warning');
            }
        });
    });
</script>

<style>
    .datagrid-toolbar .selected {
        color: #f1f1f1;
        background: #1065a7;
        border: 1px solid #f0f0f0;
    }
</style>